<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number Count up</title>
</head>
<body>
<div id="number">0</div>
<form id="form">
    <input type="text" name="min" placeholder="初始值">
    <input type="text" name="max" placeholder="最大值">
    <input type="text" name="time" placeholder="时间(单位毫秒)">

</form>
<button onclick="run()">run</button>

</body>
<script>
  function count({max, min = 0, time = 1000}) {
    const obj = document.querySelector('#number');
    obj.innerText = min
    const renderGap = Math.random() * 30 + 20
    const gap = ((max - min) / time * renderGap) | 0

    let async = setInterval(() => {
      let nextNumber = +obj.innerText + gap
      if (nextNumber >= max) {
        nextNumber = max
        clearInterval(async)
      }
      obj.innerText = nextNumber
    }, renderGap)
  }

  function run() {
    const ele = document.getElementById('form').elements
    let l = ele.length, params = {}
    while (l--) {
      const value = ele[l].value
      if (value && value !== 0) params[ele[l].name] = value
    }
    count(params)
    console.dir(params)
  }

  // count({max: 12950})
</script>
</html>